<template>
  <div class="hello">
    <h1 v-if="msg">{{ msg }}</h1>
    <button @click="clearMsg">清空</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    clearMsg() {
      this.$emit('clear')  // 通知父组件去清空输入框
    }
  }
}
</script>

<style scoped>
.hello {
  margin-top: 20px;
}

button {
  margin-top: 10px;
  padding: 8px;
  font-size: 16px;
  cursor: pointer;
}
</style>
